import { Divider, Layout, Menu } from "antd";
import React from "react";
import { Link, Route } from "react-router-dom";
import UserHeader from "../../moudules/userheader";
import AccountCancellation from "../account-cancellation";
import AccountProtect from "../account-protect/index";
import BindEmail from "../bind-email/index";
import BindPhone from "../bind-phone/index";
import LoginEquipment from "../login-equipment";
import LoginMethod from "../login-method";
import LoginNote from "../login-note/index";
import MyAccount from "../myaccount/index";
import Password from "../password/index";
import SensitiveNote from "../sensitive-note";

const { Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;

const UserSpace1: React.FC<any> = (props) => {
    return (
        <>
            <Layout style={{ minHeight: "100vh", flexDirection: "column" }}>
                <UserHeader />
                <Content style={{ display: "flex", padding: "20px 0", flexGrow: 1 }}>
                    <Sider
                        style={{
                            background: "#fff",
                            padding: "20px 0",
                            marginRight: 20
                        }}
                        width={250}
                    >
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%' }}
                        >
                            <Menu.Item>我的账号</Menu.Item>
                            <Menu.Item>登录密码</Menu.Item>
                            <Menu.Item>绑定手机</Menu.Item>
                            <Menu.Item>绑定邮箱</Menu.Item>
                            <Divider />
                            <Menu.Item>账号保护</Menu.Item>
                            <Menu.Item>登录方式</Menu.Item>
                            <Menu.Item>登录设备</Menu.Item>
                            <Menu.Item>登录记录</Menu.Item>
                            <Divider />
                            <Menu.Item>账号注销</Menu.Item>
                        </Menu>
                    </Sider>
                    <Content style={{ flexGrow: 1 }}>

                    </Content>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </>
    )
}

function UserSpace() {

    return (
        <>
            <Layout style={{ minHeight: "100vh", minWidth: 1600  }}>
                <UserHeader />
                <Content style={{ padding: '0 50px'}}>
                    <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
                        <Sider
                            style={{
                                background: "#fff",
                                padding: "20px 0",
                            }}
                            width={250}
                        >
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%' }}
                            >
                                <Menu.Item><Link to="/userspace/myaccount">我的账号</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/password">登录密码</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/bind-phone">绑定手机</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/bind-email">绑定邮箱</Link></Menu.Item>
                                <Divider />
                                <Menu.Item><Link to="/userspace/account-protect">账号保护</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/login-method">登录方式</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/login-equipment">登录设备</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/login-note">登录记录</Link></Menu.Item>
                                <Menu.Item><Link to="/userspace/sensitive-note">敏感记录</Link></Menu.Item>
                                <Divider />
                                <Menu.Item><Link to="/userspace/account-cancellation">账号注销</Link></Menu.Item>
                            </Menu>
                        </Sider>
                        <Content
                            style={{
                                margin: '0 24px 0 24px',
                                minHeight: 280,
                            }}
                        >
                            <Route path="/userspace/myaccount" component={MyAccount}></Route>
                            <Route path="/userspace/password" component={Password}></Route>
                            <Route path="/userspace/bind-phone" component={BindPhone}></Route>
                            <Route path="/userspace/bind-email" component={BindEmail}></Route>
                            <Route path="/userspace/account-protect" component={AccountProtect}></Route>
                            <Route path="/userspace/login-note" component={LoginNote}></Route>
                            <Route path="/userspace/login-equipment" component={LoginEquipment}></Route>
                            <Route path="/userspace/login-method" component={LoginMethod}></Route>
                            <Route path="/userspace/account-cancellation" component={AccountCancellation}></Route>
                            <Route path="/userspace/sensitive-note" component={SensitiveNote}></Route>
                        </Content>
                        <Sider width={250} style={{background: "#fff"}}></Sider>
                    </Layout>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </>
    )
}

export default UserSpace;